const data = {
  templates: [
    {
      title: 'Automatic Speech Recognition',
      type: 'community',
      group: 'Audio/Speech Processing',
      image: '/static/templates/automatic-speech-recognition.png',
      details: '<h1>Provide transcript for the audio</h1>',
      config:
        '<View>\n  <Audio name="audio" value="$audio" zoom="true" hotkey="ctrl+enter" />\n  <Header value="Provide Transcription" />\n  <TextArea name="transcription" toName="audio"\n            rows="4" editable="true" maxSubmissions="1" />\n</View>\n',
    },
    {
      title: 'Automatic Speech Recognition using Segments',
      type: 'community',
      group: 'Audio/Speech Processing',
      image:
        '/static/templates/automatic-speech-recognition-using-segments.png',
      details:
        '<h1>Do voice activity segmentation and provide a transcript for the audio</h1>',
      config:
        '<View>\n  <Labels name="labels" toName="audio">\n    <Label value="Speech" />\n    <Label value="Noise" />\n  </Labels>\n\n  <AudioPlus name="audio" value="$audio"/>\n\n  <TextArea name="transcription" toName="audio"\n            rows="2" editable="true"\n            perRegion="true" required="true" />\n</View>\n',
    },
    {
      title: 'Conversational Analysis',
      type: 'community',
      group: 'Audio/Speech Processing',
      image: '/static/templates/thumbnail-conversation-sentiment.png',
      details:
        '<h1>Analyse dialogue utterances and markup facts and sentiment aspects</h1>',
      config:
        '<View>\n    <Audio name="audio" value="$audio"\n           hotkey="space" sync="text"/>\n    <Header value="Transcript"/>\n    <Paragraphs audioUrl="$audio"\n                sync="audio"\n                name="text"\n                value="$text"\n                layout="dialogue"\n                textKey="text"\n                nameKey="author"\n                granularity="paragraph"/>\n     <View style="position: sticky">\n      <Header value="Sentiment Labels"/>\n      <ParagraphLabels name="label" toName="text">\n        <Label value="Positive1" background="#00ff00"/>\n        <Label value="Negative" background="#ff0000"/>\n      </ParagraphLabels>\n    </View>\n</View>\n<!-- { "data": {\n  "text": [\n    {\n      "end": 1.5,\n      "text": "Dont you hate that?",\n      "start": 0,\n      "author": "Mia Wallace"\n    },\n    {\n      "text": "Hate what?",\n      "start": 1.5,\n      "author": "Vincent Vega:",\n      "duration": 3\n    },\n    {\n      "end": 7,\n      "text": "Uncomfortable silences. Why do we feel its necessary to yak about bullshit in order to be comfortable?",\n      "start": 4.5,\n      "author": "Mia Wallace:"\n    },\n    {\n      "end": 10,\n      "text": "I dont know. Thats a good question.",\n      "start": 8,\n      "author": "Vincent Vega:"\n    },\n    {\n      "text": "Thats when you know you found somebody really special. When you can just shut the fuck up for a minute, and comfortably share silence.",\n      "start": 10,\n      "author": "Mia Wallace:"\n    }\n  ],\n  "audio": "/static/samples/game.wav"\n}}\n-->',
    },
    {
      title: 'Intent Classification',
      type: 'community',
      group: 'Audio/Speech Processing',
      image: '/static/templates/intent-classification.png',
      details:
        '<h1>Do voice activity segmentation and choose spoken intent</h1>',
      config:
        '<View>\n  <Labels name="labels" toName="audio">\n    <Label value="Segment" />\n  </Labels>\n\n  <Audio name="audio" value="$audio"/>\n\n  <Choices name="intent" toName="audio" perRegion="true" required="true">\n    <Choice value="Question" />\n    <Choice value="Request" />\n    <Choice value="Satisfied" />\n    <Choice value="Interested" />\n    <Choice value="Unsatisfied" />\n  </Choices>\n</View>\n',
    },
    {
      title: 'Signal Quality Detection',
      type: 'community',
      group: 'Audio/Speech Processing',
      image: '/static/templates/signal-quality-detection.png',
      details: '<h1>Rate signal quality</h1>',
      config:
        '<View>\n  <Rating name="rating" toName="audio" maxRating="10" icon="star" size="medium" />\n  <Audio name="audio" value="$audio"/>\n</View>\n',
    },
    {
      title: 'Sound Event Detection',
      type: 'community',
      group: 'Audio/Speech Processing',
      image: '/static/templates/sound-event-detection.png',
      details: '<h1>Select audio span and classify sound event</h1>',
      config:
        '<View>\n  <Labels name="label" toName="audio" zoom="true" hotkey="ctrl+enter">\n    <Label value="Event A" background="red"/>\n    <Label value="Event B" background="green"/>\n  </Labels>\n  <Audio name="audio" value="$audio"/>\n</View>\n',
    },
    {
      title: 'Speaker Segmentation',
      type: 'community',
      group: 'Audio/Speech Processing',
      image: '/static/templates/speaker-segmentation.png',
      details: '<h1>Perform speaker segmentation / diarization task</h1>',
      config:
        '<View>\n  <Labels name="label" toName="audio" zoom="true" hotkey="ctrl+enter">\n    <Label value="Speaker one" background="#00FF00"/>\n    <Label value="Speaker two" background="#12ad59"/>\n  </Labels>\n  <Audio name="audio" value="$audio" />\n</View>\n',
    },
    {
      title: 'Speech Transcription',
      type: 'community',
      group: 'Audio/Speech Processing',
      image: '/static/templates/thumbnail-audio-sentiment.png',
      details: '<h1>Transcribe audio recordings with chunks</h1>',
      config:
        '<View>\n    <Audio name="audio" value="$audio" />\n    <Labels name="label" toName="audio">\n      <Label value="Speech"/>\n      <Label value="Noise" background="grey"/>\n    </Labels>\n    <TextArea name="transcription" toName="audio"\n              perRegion="true" whenTagName="label" whenLabelValue="Speech"\n              displayMode="region-list"/>\n    <Choices name="sentiment" toName="audio" showInline="true"\n             perRegion="true" whenTagName="label" whenLabelValue="Speech">\n        <Choice value="Positive" html="&lt;span style=\'font-size: 45px; vertical-align: middle;\'&gt; &#128512; &lt;/span&gt;"/>\n        <Choice value="Neutral" html="&lt;span style=\'font-size: 45px; vertical-align: middle;\'&gt; &#128528; &lt;/span&gt;"/>\n        <Choice value="Negative" html="&lt;span style=\'font-size: 45px; vertical-align: middle;\'&gt; &#128577; &lt;/span&gt;"/>\n    </Choices>                               \n  </View>\n',
    },
    {
      title: 'Image Captioning',
      type: 'community',
      group: 'Computer Vision',
      image: '/static/templates/image-captioning.png',
      details: '<h1>Write text describing the image</h1>',
      config:
        '<View>\n  <Image name="image" value="$captioning"/>\n  <Header value="Describe the image:"/>\n  <TextArea name="caption" toName="image" placeholder="Enter description here..."\n            rows="5" maxSubmissions="1"/>\n</View>\n',
    },
    {
      title: 'Image Classification',
      type: 'community',
      group: 'Computer Vision',
      image: '/static/templates/image-classification.png',
      details: '<h1>Classify the image</h1>',
      config:
        '<View>\n  <Image name="image" value="$image"/>\n  <Choices name="choice" toName="image">\n    <Choice value="Adult content"/>\n    <Choice value="Weapons" />\n    <Choice value="Violence" />\n  </Choices>\n</View>\n',
    },
    {
      title: 'Inventory Tracking',
      type: 'community',
      group: 'Computer Vision',
      image: '/static/templates/inventory-tracking.png',
      details: '<h1>Label exact products on the shelves</h1>',
      config:
        '<View>\n  <View style="display:flex;justify-content:center">\n    <PolygonLabels name="objects" toName="image" value="$objects"/>\n  </View>\n  <Image name="image" value="$image"/>\n</View>\n<!-- {\n  "data": {\n    "image": "https://htx-pub.s3.amazonaws.com/templates/inventory-tracking/shelf.jpeg",\n    "objects": [{\n      "value": "CocaCola",\n      "html": "<img width=\'100\' src=\'https://htx-pub.s3.amazonaws.com/templates/inventory-tracking/cocacola.png\'/>"\n    }, {\n      "value": "RedBull",\n      "html": "<img width=\'100\' src=\'https://htx-pub.s3.amazonaws.com/templates/inventory-tracking/redbull.png\'/>"\n    }, {\n      "value": "Burn",\n      "html": "<img width=\'100\' src=\'https://htx-pub.s3.amazonaws.com/templates/inventory-tracking/burn.png\'/>"\n    }, {\n      "value": "Breezer",\n      "html": "<img width=\'100\' src=\'https://htx-pub.s3.amazonaws.com/templates/inventory-tracking/breezer.png\'/>"\n    }, {\n      "value": "Monster",\n      "html": "<img width=\'100\' src=\'https://htx-pub.s3.amazonaws.com/templates/inventory-tracking/monster.png\'/>"\n    }]\n  }\n} -->\n',
    },
    {
      title: 'Keypoint Labeling',
      type: 'community',
      group: 'Computer Vision',
      order: 10000,
      image: '/static/templates/keypoints.png',
      details: '<h1>Click the label and then on the canvas</h1>',
      config:
        '<View>\n  <KeyPointLabels name="kp-1" toName="img-1">\n    <Label value="Face" background="red" />\n    <Label value="Nose" background="green" />\n  </KeyPointLabels>\n  <Image name="img-1" value="$img" />\n</View>\n',
    },
    {
      title: 'Multi-page document annotation',
      type: 'community',
      group: 'Computer Vision',
      image: '/static/templates/multipage.png',
      details: '<h1>Classify PDF documents</h1>',
      config:
        '<View>\n  <Repeater on="$document" indexFlag="{{idx}}" mode="pagination">\n      <Image name="page_{{idx}}" value="$document[{{idx}}].page" inline="true"/>\n      <RectangleLabels name="labels_{{idx}}" toName="page_{{idx}}">\n        <Label value="Title" background="green" />\n        <Label value="Date" background="blue" />\n        <Label value="Author" background="yellow"/>\n        <Label value="Organization" background="orange"/>\n        <Label value="Amount" background="red"/>\n      </RectangleLabels>\n      <View style="display: flex; justify-content: center;">\n        <Header value="Rate this page:"/>\n        <Rating name="rating_{{idx}}" toName="page_{{idx}}"/>\n      </View>\n  </Repeater>\n</View>\n\n\n<!-- {\n"document": [\n    {\n      "page": "https://htx-pub.s3.amazonaws.com/demo/images/demo_stock_purchase_agreement/0001.jpg"\n    },\n    {\n      "page": "https://htx-pub.s3.amazonaws.com/demo/images/demo_stock_purchase_agreement/0002.jpg"\n    },\n    {\n      "page": "https://htx-pub.s3.amazonaws.com/demo/images/demo_stock_purchase_agreement/0003.jpg"\n    }\n  ]\n} -->\n',
    },
    {
      title: 'Object Detection with Bounding Boxes',
      type: 'community',
      group: 'Computer Vision',
      order: 3,
      image: '/static/templates/object-detection-with-bounding-boxes.png',
      details: '<h1>Draw a bounding box around the object</h1>',
      config:
        '<View>\n  <Image name="image" value="$image"/>\n  <RectangleLabels name="label" toName="image">\n    <Label value="Airplane" background="green"/>\n    <Label value="Car" background="blue"/>\n  </RectangleLabels>\n</View>\n',
    },
    {
      title: 'Optical Character Recognition',
      type: 'community',
      group: 'Computer Vision',
      image: '/static/templates/optical-character-recognition.png',
      details:
        '<h1>Draw a bounding box or polygon around region and write down the text found inside</h1>',
      config:
        '<View>\n  <Image name="image" value="$ocr"/>\n\n  <Labels name="label" toName="image">\n    <Label value="Text" background="green"/>\n    <Label value="Handwriting" background="blue"/>\n  </Labels>\n\n  <Rectangle name="bbox" toName="image" strokeWidth="3"/>\n  <Polygon name="poly" toName="image" strokeWidth="3"/>\n\n  <TextArea name="transcription" toName="image"\n            editable="true"\n            perRegion="true"\n            required="true"\n            maxSubmissions="1"\n            rows="5"\n            placeholder="Recognized Text"\n            displayMode="region-list"\n            />\n</View>\n',
    },
    {
      title: 'Semantic Segmentation with Masks',
      type: 'community',
      group: 'Computer Vision',
      order: 2,
      image: '/static/templates/semantic-segmentation-with-masks.png',
      details: '<h1>Draw masks around the object with the brush tool</h1>',
      config:
        '<View>\n  <Image name="image" value="$image" zoom="true"/>\n  <BrushLabels name="tag" toName="image">\n    <Label value="Airplane" background="rgba(255, 0, 0, 0.7)"/>\n    <Label value="Car" background="rgba(0, 0, 255, 0.7)"/>\n  </BrushLabels>\n</View>\n',
    },
    {
      title: 'Semantic Segmentation with Polygons',
      type: 'community',
      group: 'Computer Vision',
      order: 1,
      image: '/static/templates/semantic-segmentation-with-polygons.png',
      details: '<h1>Draw a polygon around object</h1>',
      config:
        '<View>\n\n  <Header value="Select label and click the image to start"/>\n  <Image name="image" value="$image" zoom="true"/>\n\n  <PolygonLabels name="label" toName="image"\n                 strokeWidth="3" pointSize="small"\n                 opacity="0.9">\n    <Label value="Airplane" background="red"/>\n    <Label value="Car" background="blue"/>\n  </PolygonLabels>\n\n</View>\n',
    },
    {
      title: 'Visual Genome',
      type: 'community',
      group: 'Computer Vision',
      image: '/static/templates/visual-genome.png',
      details: '<h1>Label different described features</h1>',
      config:
        '<View>\n  <View style="display: flex; flex-wrap: wrap;">\n    <View className="label-column">\n      <Header value="Regions"/>\n      <RectangleLabels name="regions" toName="image" value="$regions"/>\n  </View>\n    <View className="label-column">\n      <Header value="Attributes"/>\n    <RectangleLabels name="attributes" toName="image" value="$attributes"/>\n    </View>\n    <View className="label-column">\n      <Header value="Relationships"/>\n    <RectangleLabels name="relationships" toName="image" value="$relationships"/>\n    </View>\n \n  </View>\n  <Image name="image" value="$image"/>\n  <Style>\n  .label-column .lsf-labels {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n  }\n  </Style>\n</View>\n<!-- { "data": {\n  "image": "https://htx-pub.s3.amazonaws.com/templates/visual-genome/panda.jpeg",\n  "regions": [{\n    "value": "panda bear holding something in it\'s paw"\n  }, {\n    "value": "trees behind the panda out of focus"\n  }, {\n      "value": "piece of bamboo in panda\'s paw"\n    }, {\n      "value": "bamboo next to panda"\n    }, {\n      "value": "the panda is cute"\n    }],\n  "attributes": [{\n    "value": "markings is black"\n  }, {\n    "value": "nose is black"\n  }, {\n    "value": "face is round"\n  }, {\n      "value": "wood is round"\n    }],\n  "relationships": [{\n    "value": "hole ON log"\n  }, {\n    "value": "tree BEHIND bear"\n  }, {\n      "value": "mouth OF panda"\n    }]\n}}-->\n',
    },
    {
      title: 'Visual Question Answering',
      type: 'community',
      group: 'Computer Vision',
      image: '/static/templates/visual-question-answering.png',
      details:
        '<h1>Answer the questions related to what you see on the picture</h1>',
      config:
        '<View>\n  <Image name="image" value="$image"/>\n  <Labels name="aspect" toName="q1">\n    <Label value="attribute identification" background="#F39C12"/>\n    <Label value="counting" background="#E74C3C"/>\n    <Label value="comparison" background="#3498DB"/>\n    <Label value="multiple attention" background="#2ECC71"/>\n    <Label value="logical operations" background="#8E44AD"/>\n  </Labels>\n  <Header value="Please answer these questions:"/>\n\n  <View style="display: grid; grid-template-columns: 1fr 10fr 1fr 3fr; column-gap: 1em">\n    <Header value="Q1:"/>\n  <Text name="q1" value="$q1"/>\n   <Header value="A1:"/>\n    <TextArea name="answer1" toName="q1" rows="1" maxSubmissions="1"/>\n  </View>\n\n  <View style="display: grid; grid-template-columns: 1fr 10fr 1fr 3fr; column-gap: 1em">\n    <Header value="Q2:"/>\n  <Text name="q2" value="$q2"/>\n   <Header value="A2:"/>\n    <TextArea name="answer2" toName="q2" rows="1" maxSubmissions="1"/>\n  </View>\n  <View style="display: grid; grid-template-columns: 1fr 10fr 1fr 3fr; column-gap: 1em">\n    <Header value="Q3:"/>\n  <Text name="q3" value="$q3"/>\n   <Header value="A3:"/>\n    <TextArea name="answer3" toName="q3" rows="1" maxSubmissions="1"/>\n    </View>\n  <View style="display: grid; grid-template-columns: 1fr 10fr 1fr 3fr; column-gap: 1em">\n    <Header value="Q4:"/>\n  <Text name="q4" value="$q4"/>\n   <Header value="A4:"/>\n    <TextArea name="answer4" toName="q4" rows="1" maxSubmissions="1"/>\n    </View>\n</View>\n',
    },
    {
      title: 'Coreference Resolution & Entity Linking',
      type: 'community',
      group: 'Conversational AI',
      image: '/static/templates/coreference-resolution-and-entity-linking.png',
      details:
        '<h1>Do coreference resolution between parts of speech and link entities in text</h1>',
      config:
        '<View>\n  <Labels name="label" toName="text">\n    <Label value="Noun" background="red"/>\n    <Label value="Pronoun" background="darkorange"/>\n  </Labels>\n\n  <Text name="text" value="$corefText"/>\n</View>\n',
    },
    {
      title: 'Intent Classification and Slot Filling',
      type: 'community',
      group: 'Conversational AI',
      image: '/static/templates/intent-classification-and-slot-filling.png',
      details:
        '<h1>Build task-oriented dialogue system by selecting dialogue intents and extracting slot entities</h1>',
      config:
        '<View>\n  <ParagraphLabels name="entity_slot" toName="dialogue">\n    <Label value="Person" />\n    <Label value="Organization" />\n    <Label value="Location" />\n    <Label value="Datetime" />\n    <Label value="Quantity" />\n  </ParagraphLabels>\n  <Paragraphs name="dialogue" value="$humanMachineDialogue" layout="dialogue" />\n    <Choices name="intent" toName="dialogue"\n         choice="single" showInLine="true">\n        <Choice value="Greeting"/>\n        <Choice value="Customer request"/>\n        <Choice value="Small talk"/>\n    </Choices>\n</View>\n',
    },
    {
      title: 'Response Generation',
      type: 'community',
      group: 'Conversational AI',
      image: '/static/templates/response-generation.png',
      details:
        '<h1>Collect chatbot training data by generating next dialogue response</h1>',
      config:
        '<View>\n  <Paragraphs name="chat" value="$dialogue" layout="dialogue" />\n  <Header value="Provide response" />\n  <TextArea name="response" toName="chat" rows="4" editable="true" maxSubmissions="1" />\n</View>\n',
    },
    {
      title: 'Response Selection',
      type: 'community',
      group: 'Conversational AI',
      image: '/static/templates/response-selection.png',
      details:
        '<h1>Collect chatbot training data by selecting next dialogue response</h1>',
      config:
        '<View>\n  <Paragraphs name="prg" value="$humanMachineDialogue" layout="dialogue" />\n  <Header value="Choose response" />\n  <View style="display: flex;">\n    <View>\n    <Text name="resp1" value="$respone" />\n    <Text name="resp2" value="$resptwo" />\n    <Text name="resp3" value="$respthree" />\n    </View>\n    <View style="padding: 50px;">\n    <Choices name="resp" toName="prg" required="true">\n      <Choice value="One" />\n      <Choice value="Two" />\n      <Choice value="Three" />\n    </Choices>\n    </View>\n  </View>\n</View>\n',
    },
    {
      title: 'Machine Translation',
      type: 'community',
      group: 'Natural Language Processing',
      image: '/static/templates/machine-translation.png',
      details: '<h1>Translate text from one language to another</h1>',
      config:
        '<View>\n  <View style="display: grid; grid-template: auto/1fr 1fr; column-gap: 1em">\n    <Header value="Read the sentence in English" />\n    <Header value="Provide translaton in Spanish" />\n\n  <Text name="english" value="$english" />\n\n  <TextArea name="spanish" toName="english" transcription="true"\n            showSubmitButton="true" maxSubmissions="1" editable="true"\n            required="true"/>\n  </View>\n</View>\n',
    },
    {
      title: 'Named Entity Recognition',
      type: 'community',
      group: 'Natural Language Processing',
      order: 3,
      image: '/static/templates/named-entity-recognition.png',
      details: '<h1>Extract named entities from text</h1>',
      config:
        '<View>\n  <Labels name="label" toName="text">\n    <Label value="PER" background="red"/>\n    <Label value="ORG" background="darkorange"/>\n    <Label value="LOC" background="orange"/>\n    <Label value="MISC" background="green"/>\n  </Labels>\n\n  <Text name="text" value="$text"/>\n</View>\n',
    },
    {
      title: 'Question Answering',
      type: 'community',
      group: 'Natural Language Processing',
      order: 1,
      image: '/static/templates/question-answering.png',
      details: '<h1>Select an answer from text</h1>',
      config:
        '<View>\n  <Header value="Please read the passage" />\n  <Text name="text" value="$text" granularity="word"/>\n  <Header value="Select a text span answering the following question:"/>\n  <Text name="question" value="$question"/>\n\n  <Labels name="answer" toName="text">\n    <Label value="Answer" maxUsage="1" background="red"/>\n  </Labels>\n\n</View>\n\n<!-- {\n"data": {\n  "text": "The boundary of the region from which no escape is possible is called the event horizon. Although the event horizon has an enormous effect on the fate and circumstances of an object crossing it, according to general relativity it has no locally detectable features.[4] In many ways, a black hole acts like an ideal black body, as it reflects no light.[5][6] Moreover, quantum field theory in curved spacetime predicts that event horizons emit Hawking radiation, with the same spectrum as a black body of a temperature inversely proportional to its mass. This temperature is on the order of billionths of a kelvin for black holes of stellar mass, making it essentially impossible to observe directly.",\n  "question": "How could black holes be detected?"\n},\n"annotations": [\n  {"result": [\n    {\n        "value": {\n            "start": 423,\n            "end": 553,\n            "text": "event horizons emit Hawking radiation, with the same spectrum as a black body of a temperature inversely proportional to its mass.",\n            "labels": [\n                "Answer"\n            ]\n        },\n        "id": "b0wKkdnnRc",\n        "from_name": "answer",\n        "to_name": "text",\n        "type": "labels"\n    }\n    ]\n  }]\n}\n-->\n',
    },
    {
      title: 'Relation Extraction',
      type: 'community',
      group: 'Natural Language Processing',
      order: 5,
      image: '/static/templates/relation-extraction.png',
      details:
        '<h1>Predict attributes and relations for entities in a sentence</h1>',
      config:
        '<View>\n   <Relations>\n    <Relation value="org:founded_by"/>\n    <Relation value="org:founded"/>\n  </Relations>\n  <Labels name="label" toName="text">\n    <Label value="Organization" background="orange"/>\n    <Label value="Person" background="green"/>\n    <Label value="Datetime" background="blue"/>\n  </Labels>\n\n  <Text name="text" value="$text"/>\n</View>\n\n<!-- {"data": {\n  "text": "Microsoft was founded by Bill Gates and Paul Allen on April 4, 1975, to develop and sell BASIC interpreters for the Altair 8800."\n}} -->\n',
    },
    {
      title: 'Taxonomy',
      type: 'community',
      group: 'Natural Language Processing',
      order: 4,
      image: '/static/templates/taxonomy.png',
      details: '<h1>Do multilabel hierarchical classification</h1>',
      config:
        '<View>\n  <Text name="text" value="$text"/>\n  <Taxonomy name="taxonomy" toName="text">\n    <Choice value="Archaea" />\n    <Choice value="Bacteria" />\n    <Choice value="Eukarya">\n      <Choice value="Human" />\n      <Choice value="Oppossum" />\n      <Choice value="Extraterrestial" />\n    </Choice>\n  </Taxonomy>\n</View>\n',
    },
    {
      title: 'Text Classification',
      type: 'community',
      group: 'Natural Language Processing',
      order: 2,
      image: '/static/templates/text-classification.png',
      details: '<h1>Classify text document</h1>',
      config:
        '<View>\n  <Text name="text" value="$text"/>\n  <View style="box-shadow: 2px 2px 5px #999;\n               padding: 20px; margin-top: 2em;\n               border-radius: 5px;">\n    <Header value="Choose text sentiment"/>\n    <Choices name="sentiment" toName="text"\n             choice="single" showInLine="true">\n      <Choice value="Positive"/>\n      <Choice value="Negative"/>\n      <Choice value="Neutral"/>\n    </Choices>\n  </View>\n</View>\n\n<!-- {\n  "data": {"text": "This is a great 3D movie that delivers everything almost right in your face."}\n} -->\n',
    },
    {
      title: 'Text Summarization',
      type: 'community',
      group: 'Natural Language Processing',
      image: '/static/templates/text-summarization.png',
      details: '<h1>Provide one sentence summary</h1>',
      config:
        '<View>\n  <Header value="Please read the text" />\n  <Text name="text" value="$text" />\n\n  <Header value="Provide one sentence summary" />\n  <TextArea name="answer" toName="text"\n            showSubmitButton="true" maxSubmissions="1" editable="true"\n            required="true" />\n</View>\n\n\n<!-- {\n "data": {\n   "text": "There are two general approaches to automatic summarization: extraction and abstraction. Extraction-based summarization: Here, content is extracted from the original data, but the extracted content is not modified in any way. Examples of extracted content include key-phrases that can be used to \\"tag\\" or index a text document, or key sentences (including headings) that collectively comprise an abstract, and representative images or video segments, as stated above. For text, extraction is analogous to the process of skimming, where the summary (if available), headings and subheadings, figures, the first and last paragraphs of a section, and optionally the first and last sentences in a paragraph are read before one chooses to read the entire document in detail.[3] Other examples of extraction that include key sequences of text in terms of clinical relevance (including patient/problem, intervention, and outcome).[4] Abstraction-based summarization: This has been applied mainly for text. Abstractive methods build an internal semantic representation of the original content, and then use this representation to create a summary that is closer to what a human might express. Abstraction may transform the extracted content by paraphrasing sections of the source document, to condense a text more strongly than extraction. Such transformation, however, is computationally much more challenging than extraction, involving both natural language processing and often a deep understanding of the domain of the original text in cases where the original document relates to a special field of knowledge. \\"Paraphrasing\\" is even more difficult to apply to image and video, which is why most summarization systems are extractive."\n },\n "annotations": [{\n     "result": [\n       {\n         "value": {\n           "text": [\n             "There are two approaches to automatic summarization: extraction and abstraction. In extraction summarization content is extracted from the original data, whereas Abstraction may transform the extracted content by paraphrasing sections of the source document."\n           ]\n         },\n         "id": "Zc_Rb6Bszp",\n         "from_name": "answer",\n         "to_name": "text",\n         "type": "textarea"\n       }\n     ]\n   }]\n } -->\n',
    },
    {
      title: 'ASR Hypotheses Selection',
      type: 'community',
      group: 'Ranking & Scoring',
      image: '/static/templates/asr-hypotheses.png',
      details:
        '<h1>Choose the most accurate Automatic Speach Recognition (ASR) hypothese</h1>',
      config:
        '<View>\n  <Audio name="audio" value="$audio"/>\n  <Choices name="transcriptions" toName="audio" value="$transcriptions" selection="highlight"/>\n</View>\n<!-- { "data": {\n  "audio": "https://htx-pub.s3.amazonaws.com/datasets/audio/f2btrop6.0.wav",\n  "transcriptions": [{\n          "style": "padding-left: 5px; box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px; background-color: #FFFFFF",\n    "value": "potrostith points out that if school based clinics were established parental permission would be required for students to receive each service offered"\n  }, {\n          "style": "padding-left: 5px; box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px; background-color: #F8F8F8",\n    "value": "potrostith points out that if school-based clinics were established parental permission would be required for students to receive each service offered"\n  }, {\n          "style": "padding-left: 5px; box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px; background-color: #F5F5F5",\n    "value": "purporting points out that if school based clinics were established parental permission would be required for students to receive each service offered"\n  }, {\n          "style": "padding-left: 5px; box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px; background-color: #F0F0F0",\n    "value": "pork roasted points out that if school based clinics were establish parental permission would be required for students to receive each service offered"\n  }, {\n          "style": "padding-left: 5px; box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px; background-color: #E8E8E8",\n    "value": "purpose it points out that if school based clinics war establish parental permission would be required for students to receive each service offered"\n  }]\n}} -->\n',
    },
    {
      title: 'Content-based Image Retrieval',
      type: 'community',
      group: 'Ranking & Scoring',
      image: '/static/templates/content-based-image-search.png',
      details: '<h1>Select images related to the query image</h1>',
      config:
        '<View>\n  <Image name="query" value="$query_image" />\n  <Header value="Choose similar images:" />\n  <View style="display: grid; column-gap: 8px; grid-template: auto/1fr 1fr 1fr">\n    <Image name="image1" value="$image1" />\n    <Image name="image2" value="$image2" />\n    <Image name="image3" value="$image3" />\n  </View>\n  <Choices name="similar" toName="query" required="true" choice="multiple">\n    <Choice value="One" />\n    <Choice value="Two" />\n    <Choice value="Three" />\n  </Choices>\n  <Style>\n    [dataneedsupdate]~div form {display: flex}\n    [dataneedsupdate]~div form>* {flex-grow:1;margin-left:8px}\n  </Style>\n</View>\n',
    },
    {
      title: 'Document Retrieval',
      type: 'community',
      group: 'Ranking & Scoring',
      image: '/static/templates/document-retrieval.png',
      details: '<h1>Select document related to the query</h1>',
      config:
        '<View>\n  <Text name="query" value="$query" />\n  <Header value="Select document related to the query:" />\n  <View style="display: flex">\n    <View style="width:50%">\n      <Text name="text1" value="$text1" />\n      <Text name="text2" value="$text2" />\n      <Text name="text3" value="$text3" />\n    </View>\n    <View>\n      <Choices name="selection" toName="query" required="true" choice="multiple">\n        <Choice value="One" />\n        <Choice value="Two" />\n        <Choice value="Two" />\n      </Choices>\n    </View>\n  </View>\n</View>\n',
    },
    {
      title: 'Pairwise classification',
      type: 'community',
      group: 'Ranking & Scoring',
      image: '/static/templates/pairwise-classification.png',
      details: '<h1>Select one of two items</h1>',
      config:
        '<View>\n  <Header>Select one of two items</Header>\n  <Pairwise name="pw" toName="text1,text2" />\n  <Text name="text1" value="$pairText1" />\n  <Text name="text2" value="$pairText2" />\n</View>\n',
    },
    {
      title: 'Pairwise regression',
      type: 'community',
      group: 'Ranking & Scoring',
      image: '/static/templates/pairwise-regression.png',
      details: '<h1>Select how likely it is that two items occur together</h1>',
      config:
        '<View>\n  <Header>Set how likely it is that these images represent the same thing:</Header>\n    <Rating name="rating" toName="image1,image2"/>\n    <Image name="image1" value="$image1" />\n    <Image name="image2" value="$image2" />\n</View>\n',
    },
    {
      title: 'Search Page Ranking',
      type: 'community',
      group: 'Ranking & Scoring',
      image: '/static/templates/serp-ranking.png',
      details: '<h1>Rank different kinds of results by given search query</h1>',
      config:
        '<View>\n  <View style="margin:5px;      width:575px;      border-radius:30px;      border:1px solid #dcdcdc;             height:45px;      width:500px;      font-size:16px;             display: flex;             justify-content: center;             padding: 8px;      outline: none;             background-image: url(\'https://htx-pub.s3.amazonaws.com/samples/google-search-magnifying-glass-icon-5.jpeg\');             background-position: left center;             background-size: 24px;             background-repeat: no-repeat;             background-origin: content-box;                ">\n    <Text name="text" value="$text"/>\n  </View>\n  <View className="dynamic_choices">\n    <Choices name="dynamic_choices" toName="text" selection="checkbox" value="$options" layout="vertical" choice="multiple" allownested="true"/>\n  </View>\n  <View style="box-shadow: 2px 2px 5px #999; padding: 20px; margin-top: 1em; border-radius: 5px;">\n    <Header value="Search Quality"/>\n    <Rating name="relevance" toName="text"/>\n  </View>\n  <View style="box-shadow: 2px 2px 5px #999; padding: 15px 5px 10px 20px; margin-top: 1.5em; margin-bottom: 1.25em; border-radius: 5px; display: flex; align-items: center;">\n    <Header value="Labeling Confidence" style="font-size: 1.25em"/>\n    <View style="margin: 0 1em 0.5em 1.5em">\n      <Choices name="confidence" toName="text" choice="single" showInLine="true">\n        <Choice value="Low" html="&lt;img width=\'40\' src=\'https://www.iconsdb.com/icons/preview/green/thumbs-up-xxl.png\'/&gt;"/>\n        <Choice value="High" html="&lt;img width=\'40\' src=\'https://www.iconsdb.com/icons/preview/red/thumbs-down-xxl.png\'/&gt;"/>\n      </Choices>\n    </View>\n  </View>\n  <Style>\n  .searchresultsarea {\n    margin-left: 10px;\n    font-family: \'Arial\';\n  }\n  .searchresult {\n  \tmargin-left: 8px;\n\t}\n\t.searchresult h2 {\n    font-size: 19px;\n    line-height: 18px;\n    font-weight: normal;\n    color: rgb(29, 1, 189);\n    margin-bottom: 0px;\n    margin-top: 25px;\n\t}\n\t.searchresult a {\n    font-size: 14px;\n    line-height: 14px;\n    color: green;\n    margin-bottom: 0px;\n\t}\n  .searchresult button {\n    font-size: 10px;\n    line-height: 14px;\n    color: green;\n    margin-bottom: 0px;\n    padding: 0px;\n    border-width: 0px;\n    background-color: white;\n  }\n  </Style>\n</View>\n<!-- {\n  "data": {\n    "text": "Which is the biggest black hole in the universe?",\n    "options": [\n      {\n        "html": "<div class=\\"searchresultsarea\\"><div class=\\"searchresult\\"><h2>List of most massive black holes - Wikipedia</h2><a href=\'https://en.wikipedia.org/wiki/List_of_most_massive_black_holes\' target=\'_blank\'>https://en.wikipedia.org/wiki/List_of_most_massive_black_holes</a> <p>List ; Messier 59, 2.7×10 · This black hole has a retrograde rotation. ; PG 1411+442, (4.43±1.46)×10 · 79430000 ; Markarian 876, (2.79±1.29)×10 · 240000000 ; Andromeda ...</p></div>",\n        "value": "result1",\n        "children": [\n          {\n            "html": "<div class=\\"searchresultsarea\\"><div class=\\"searchresult\\"><h2>Supermassive black hole - Wikipedia</h2><a href=\'https://en.wikipedia.org/wiki/Supermassive_black_hole\' target=\'_blank\'>https://en.wikipedia.org/wiki/Supermassive_black_hole</a> <p>The largest supermassive black hole in the Milky Way\'s vicinity appears to be that of Messier 87 (i.e. M87*), at a mass of (6.4±0.5)×109 (c. 6.4 billion) M ☉ at a distance of 53.5 million light-years.</p></div>",\n            "value": "result11",\n            "selected": true\n          },\n          {\n            "html": "<div class=\\"searchresultsarea\\"><div class=\\"searchresult\\"><h2>Buraco negro supermassivo</h2><a href=\'https://pt.wikipedia.org/wiki/Buraco_negro_supermassivo\' target=\'_blank\'>https://pt.wikipedia.org/wiki/Buraco_negro_supermassivo</a> <p>Um buraco negro supermassivo é uma classe de buracos negros encontrados principalmente no centro das galáxias. Ao contrário dos buracos negros estelares, que são originados a partir da evolução de estrelas de massa elevada, os buracos negros supermassivos foram formados por imensas nuvens de gás ou por aglomerados de milhões de estrelas que colapsaram sobre a sua própria gravidade quando o universo ainda era bem mais jovem e denso.</p></div>",\n            "value": "result12"\n          }\n        ]\n      },\n      {\n        "html": "<div class=\\"searchresultsarea\\"><div class=\\"searchresult\\"><h2>Black Hole Size Comparison Chart Gives New View of Universe</h2><a href=\'https://nerdist.com/article/biggest-black-holes-size-comparison/\' target=\'_blank\'>https://nerdist.com/article/biggest-black-holes-size-comparison/</a> <p>They can fit multiple solar systems inside of them. Ton 618, the largest ultramassive black hole, appears at the very end of the video, which, ...</p></div>",\n        "value": "result2"\n      },\n      {\n        "html": "<div class=\\"searchresultsarea\\"><div class=\\"searchresult\\"><h2>How Big Is the Largest Black Hole in the Universe? - Business ...</h2><a href=\'https://www.businessinsider.com/black-hole-how-big-largest-universe-2019-5\' target=\'_blank\'>https://www.businessinsider.com/black-hole-how-big-largest-universe-2019-5</a> <p>And the supermassive black hole at the center of Messier 87 is so huge that astronomers could see it from 55 million light-years away. It\'s 24 ...</p></div>",\n        "value": "result3"\n      },\n      {\n        "html": "<div class=\\"searchresultsarea\\"><div class=\\"searchresult\\"><h2>5 Most Massive Black Holes Discovered So Far. - The Secrets</h2><a href=\'https://www.secretsofuniverse.in/5-most-massive-black-holes/\' target=\'_blank\'>https://www.secretsofuniverse.in/5-most-massive-black-holes/</a> <p>The list of the most massive black holes is topped by TON 618. TON 618 is technically a a hyperluminous, broad-absorption line, radio-loud quasar—located near</p></div>",\n        "value": "result4"\n      },\n      {\n        "html": "<div class=\\"searchresultsarea\\"><div class=\\"searchresult\\"><h2>\'Stupendously large\' black holes could grow to truly monstrous ...</h2><a href=\'https://www.space.com/black-holes-can-reach-stupendously-large-sizes.html\' target=\'_blank\'>https://www.space.com/black-holes-can-reach-stupendously-large-sizes.html</a> <p>Currently the largest known black hole, powering the quasar TON 618, has a mass of 66 billion solar masses. TON 618\'s enormous bulk led ...</p></div>",\n        "value": "result5"\n      }\n    ]\n  }\n} -->\n',
    },
    {
      title: 'Text-to-Image Generation',
      type: 'community',
      group: 'Ranking & Scoring',
      image: '/static/templates/text-to-image.png',
      details:
        '<h1>Choose the most related image generated by textual description</h1>',
      config:
        '<View>\n  <View className="ch-title">\n    <Text name="prompt" value="$prompt"/>\n  </View>\n  <View className="highlight">\n    <Choices name="images" toName="prompt" value="$images" choice="multiple" layout="inline"/>\n  </View>\n  <Style>\n  .ch-title {\n    font-size: 2em;\n    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;\n    text-align: center;\n  }\n  .ch-title .lsf-richtext__line:before {\n    display: none;\n  }\n  .highlight .ant-checkbox {\n    position: absolute;\n    opacity: 0;\n  }\n  .ant-checkbox+span {\n    border: 4px solid transparent;\n    border-radius: 8px;\n    padding: 8px;\n  }\n  .ant-checkbox-checked+span {\n    border-color: red;\n  }\n  .ant-checkbox+span sup {\n    position: absolute;\n    right: 8px;\n    top: 8px;\n    z-index: 2;\n    display: block;\n    background: white;\n    width: 24px;\n    line-height: 16px;\n    text-align: center;\n  }\n  </Style>\n</View>\n<!-- {"data": {\n  "prompt": "An astronaut riding a horse in a photorealistic style",\n  "images": [{\n    "value": "id123#0",\n\t"style": "margin: 5px",\n    "html": "<img width=\'400\' src=\'https://cdn.openai.com/dall-e-2/demos/text2im/astronaut/horse/photo/0.jpg\'/>"\n  },\n{\n    "value": "id123#1",\n\t"style": "margin: 5px",\n    "html": "<img width=\'400\' src=\'https://cdn.openai.com/dall-e-2/demos/text2im/astronaut/horse/photo/1.jpg\'/>"\n  }, {\n    "value": "id123#2",\n\t"style": "margin: 5px",\n    "html": "<img width=\'400\' src=\'https://cdn.openai.com/dall-e-2/demos/text2im/astronaut/horse/photo/2.jpg\'/>"\n  }\n  ]\n}} -->\n',
    },
    {
      title: 'Freeform Metadata',
      type: 'community',
      group: 'Structured Data Parsing',
      image: '/static/templates/freeform-metadata.png',
      details: '<h1>Specify your own metadata in table</h1>',
      config:
        '<View>\n  <Style>\n    input[type="text"][name^="table"] { border-radius: 0px; border-right: none;}\n    input[type="text"][name^="table_metric"] { border-right: 1px solid #ddd; }\n    div[class*=" TextAreaRegion_mark"] {background: none; height: 33px; border-radius: 0; min-width: 135px;}\n  </Style>\n\n  <Text value="$text" name="text"/>\n\n  <View style="display: grid;  grid-template-columns: 1fr 1fr; max-height: 300px; width: 400px">\n    <TextArea name="table_name_1" toName="text" placeholder="name" editable="true" maxSubmissions="1"/>\n    <TextArea name="table_value_1" toName="text" placeholder="value" editable="true" maxSubmissions="1"/>\n    <TextArea name="table_name_2" toName="text" placeholder="name" editable="true" maxSubmissions="1"/>\n    <TextArea name="table_value_2" toName="text" placeholder="value" editable="true" maxSubmissions="1"/>\n    <TextArea name="table_name_3" toName="text" placeholder="name" editable="true" maxSubmissions="1"/>\n    <TextArea name="table_value_3" toName="text" placeholder="value" editable="true" maxSubmissions="1"/>\n  </View>\n</View>\n\n<!-- {\n  "data": {"text": "This is a great 3D movie that delivers everything almost right in your face."}\n}\n-->\n',
    },
    {
      title: 'HTML Entity Recognition',
      type: 'community',
      group: 'Structured Data Parsing',
      image: '/static/templates/html-entity-recognition.png',
      details: '<h1>Extract entities from hypertext documents</h1>',
      config:
        '<View>\n  <HyperTextLabels name="ner" toName="text">\n    <Label value="Title" background="green"/>\n    <Label value="Author" background="blue"/>\n    <Label value="Body" background="yellow"/>\n  </HyperTextLabels>\n\n  <View style="border: 1px solid #CCC;\n               border-radius: 10px;\n               padding: 5px">\n    <HyperText name="text" value="$html"/>\n  </View>\n</View>\n',
    },
    {
      title: 'PDF Classification',
      type: 'community',
      group: 'Structured Data Parsing',
      image: '/static/templates/pdf-classification.png',
      details: '<h1>Classify PDF documents</h1>',
      config:
        '<View>\n  <Header value="Rate this article"/>\n  <Rating name="rating" toName="pdf" maxRating="10" icon="star" size="medium" />\n\n  <Choices name="choices" choice="single-radio" toName="pdf" showInline="true">\n    <Choice value="Important article"/>\n    <Choice value="Yellow press"/>\n  </Choices>\n  <HyperText name="pdf" value="$pdf" inline="true"/>\n</View>\n\n\n<!-- {\n  "data": {\n    "pdf": "<embed src=\'/static/samples/sample.pdf\' width=\'100%\' height=\'600px\'/>"\n  }\n} -->\n',
    },
    {
      title: 'PDF Classification',
      type: 'community',
      group: 'Structured Data Parsing',
      image: '/static/templates/pdf-classification.png',
      details: '<h1>Classify PDF documents</h1>',
      config:
        '<View>\n  <Header value="Rate this article"/>\n  <Rating name="rating" toName="pdf" maxRating="10" icon="star" size="medium" />\n\n  <Choices name="choices" choice="single-radio" toName="pdf" showInline="true">\n    <Choice value="Important article"/>\n    <Choice value="Yellow press"/>\n  </Choices>\n  <HyperText name="pdf" value="$pdf" inline="true"/>\n</View>\n\n\n<!-- {\n  "data": {\n    "pdf": "<embed src=\'/static/samples/sample.pdf\' width=\'100%\' height=\'600px\'/>"\n  }\n} -->\n',
    },
    {
      title: 'Tabular Data',
      type: 'community',
      group: 'Structured Data Parsing',
      image: '/static/templates/tabular-data.png',
      details: '<h1>Annotate data in tables</h1>',
      config:
        '<View>\n    <Header value="Table with {key: value} pairs"/>\n    <Table name="table" value="$item"/>\n    <Choices name="choice" toName="table">\n        <Choice value="Correct"/>\n        <Choice value="Incorrect"/>\n    </Choices>\n</View>\n',
    },
    {
      title: 'Activity Recognition',
      type: 'community',
      group: 'Time Series Analysis',
      image: '/static/templates/activity-recognition.png',
      details:
        '<h1>Track and classify activity from sensors and IMU devices</h1>',
      config:
        '<View>\n    <!-- Control tag for region labels -->\n    <TimeSeriesLabels name="label" toName="ts">\n        <Label value="Run" background="red"/>\n        <Label value="Walk" background="green"/>\n        <Label value="Fly" background="blue"/>\n        <Label value="Swim" background="#f6a"/>\n        <Label value="Ride" background="#351"/>\n    </TimeSeriesLabels>\n\n    <!-- Object tag for time series data source -->\n    <TimeSeries name="ts" valueType="url" value="$timeseriesUrl"\n                sep=","\n                timeColumn="time"\n                timeFormat="%Y-%m-%d %H:%M:%S.%f"\n                timeDisplayFormat="%Y-%m-%d"\n                overviewChannels="velocity">\n\n        <Channel column="velocity"\n                 units="miles/h"\n                 displayFormat=",.1f"\n                 strokeColor="#1f77b4"\n                 legend="Velocity"/>\n\n        <Channel column="acceleration"\n                 units="miles/h^2"\n                 displayFormat=",.1f"\n                 strokeColor="#ff7f0e"\n                 legend="Acceleration"/>\n    </TimeSeries>\n</View>\n',
    },
    {
      title: 'Change Point Detection',
      type: 'community',
      group: 'Time Series Analysis',
      image: '/static/templates/change-point-detection.png',
      details: '<h1>Identify changing points on time series signals</h1>',
      config:
        '<View>\n    <!-- Control tag for region labels -->\n    <TimeSeriesLabels name="label" toName="ts">\n        <Label value="Change" background="red" />\n    </TimeSeriesLabels>\n\n    <!-- Object tag for time series data source -->\n    <TimeSeries name="ts" valueType="url" value="$csv"\n                sep=","\n                timeColumn="time"\n                timeFormat="%Y-%m-%d %H:%M:%S.%f"\n                timeDisplayFormat="%Y-%m-%d"\n                overviewChannels="velocity">\n\n        <Channel column="velocity"\n                 units="miles/h"\n                 displayFormat=",.1f"\n                 strokeColor="#1f77b4"\n                 legend="Velocity"/>\n    </TimeSeries>\n</View>\n',
    },
    {
      title: 'Outliers & Anomaly Detection',
      type: 'community',
      group: 'Time Series Analysis',
      image: '/static/templates/outliers-anomaly-detection.png',
      details:
        '<h1>Select time spans identifying outliers or anomalies on time series signals</h1>',
      config:
        '<View>\n    <!-- Object tag for time series data source -->\n    <TimeSeries name="ts" valueType="url" value="$csv"\n                sep=","\n                timeColumn="time"\n                timeFormat="%Y-%m-%d %H:%M:%S.%f"\n                timeDisplayFormat="%Y-%m-%d"\n                overviewChannels="velocity">\n\n        <Channel column="velocity"\n                 units="miles/h"\n                 displayFormat=",.1f"\n                 strokeColor="#1f77b4"\n                 legend="Velocity"/>\n    </TimeSeries>\n\n    <!-- Control tag for region labels -->\n    <TimeSeriesLabels name="label" toName="ts">\n        <Label value="Region" background="red" />\n    </TimeSeriesLabels>\n\n    <Choices name="region_type" toName="ts"\n          perRegion="true" required="true">\n        <Choice value="Outlier"/>\n        <Choice value="Anomaly"/>\n    </Choices>\n</View>\n',
    },
    {
      title: 'Signal Quality',
      type: 'community',
      group: 'Time Series Analysis',
      image: '/static/templates/signal-quality.png',
      details: '<h1>Rate signal quality</h1>',
      config:
        '<View>\n    <!-- No region selected section -->\n    <View visibleWhen="no-region-selected"\n          style="height:120px">\n\n        <!-- Control tag for region labels -->\n        <TimeSeriesLabels name="label" toName="ts">\n            <Label value="Region" background="#5b5"/>\n        </TimeSeriesLabels>\n    </View>\n\n    <!-- Region selected section with choices and rating -->\n    <View visibleWhen="region-selected" style="height:120px">\n\n        <!-- Per region Rating -->\n        <Rating name="rating" toName="ts"\n                maxRating="10" icon="star"\n                perRegion="true"/>\n        <!-- Per region Choices  -->\n        <Choices name="choices" toName="ts"\n                 showInline="true" required="true"\n                 perRegion="true">\n            <Choice value="Good"/>\n            <Choice value="Medium"/>\n            <Choice value="Poor"/>\n        </Choices>\n    </View>\n\n    <!-- Object tag for time series data source -->\n    <TimeSeries name="ts" valueType="url" value="$csv"\n                sep="," timeColumn="time">\n        <Channel column="signal_1"\n                 strokeColor="#17b" legend="Signal 1"/>\n        <Channel column="signal_2"\n                 strokeColor="#f70" legend="Signal 2"/>\n    </TimeSeries>\n</View>\n',
    },
    {
      title: 'Time Series Forecasting',
      type: 'community',
      group: 'Time Series Analysis',
      image: '/static/templates/time-series-forecasting.png',
      details:
        '<h1>Prepare training data for time series forecasting models</h1>',
      config:
        '<View>\n    <!-- Control tag for region labels -->\n    <Header value="Select predictable region spans in time series:"/>\n    <TimeSeriesLabels name="predictable" toName="stock">\n        <Label value="Regions" background="red" />\n    </TimeSeriesLabels>\n\n    <!-- Object tag for time series data source -->\n    <TimeSeries name="stock" valueType="url" value="$csv"\n                sep=","\n                timeColumn="time"\n                timeFormat="%Y-%m-%d %H:%M:%S.%f"\n                timeDisplayFormat="%Y-%m-%d"\n                overviewChannels="value">\n\n        <Channel column="value"\n                 displayFormat=",.1f"\n                 strokeColor="#1f77b4"\n                 legend="Stock Value"/>\n    </TimeSeries>\n    <Header value="Forecast next trend:"/>\n    <Choices name="trend_forecast" toName="stock">\n        <Choice value="Up"/>\n        <Choice value="Down"/>\n        <Choice value="Steady"/>\n    </Choices>\n</View>\n',
    },
    {
      title: 'Video Classification',
      type: 'community',
      group: 'Videos',
      image: '/static/templates/video-classification.png',
      details: '<h1>Classify video</h1>',
      config:
        '<View>\n  <Video name="video" value="$video"/>\n  <Choices name="choice" toName="video" showInLine="true">\n    <Choice value="Blurry" />\n    <Choice value="Sharp" />\n  </Choices>\n</View>\n\n<!-- {\n"data": {\n   "video": "/static/samples/opossum_snow.mp4"\n},\n"annotations": [{"result":\n    [\n        {\n            "value": {\n                "choices": [\n                    "Blurry"\n                ]\n            },\n            "id": "vB3U85jSU4",\n            "from_name": "choice",\n            "to_name": "video",\n            "type": "choices"\n        }\n    ]\n  }]\n}\n-->\n',
    },
    {
      title: 'Video Object Tracking',
      type: 'community',
      group: 'Videos',
      image: '/static/templates/object-detection-with-bounding-boxes.png',
      details: '<h1>Object tracking in video with bounding boxes</h1>',
      config:
        '<View>\n   <Labels name="videoLabels" toName="video" allowEmpty="true">\n     <Label value="Man" background="blue"/>\n     <Label value="Woman" background="red"/>\n     <Label value="Other" background="green"/>\n   </Labels>\n   \n   <!-- Please specify FPS carefully, it will be used for all project videos -->\n   <Video name="video" value="$video" framerate="25.0"/>\n   <VideoRectangle name="box" toName="video" />\n</View>\n\n<!--{\n "video": "/static/samples/opossum_snow.mp4"\n}-->\n',
    },
    {
      title: 'Video Timeline Segmentation',
      type: 'community',
      group: 'Videos',
      image: '/static/templates/video-timeline-segmentation.png',
      details: '<h1>Select and classify video segments</h1>',
      config:
        '<View>\n  <Header value="Video timeline segmentation via AudioPlus sync trick"/>\n  <Video name="video" value="$video_url" sync="audio"/>\n  <Labels name="tricks" toName="audio" choice="multiple">\n    <Label value="Kickflip" background="#1BB500"/>\n    <Label value="360 Flip" background="#FFA91D"/>\n    <Label value="Trick" background="#358EF3"/>\n  </Labels>\n  <AudioPlus name="audio" value="$video_url" sync="video" speed="false"/>\n</View>\n\n<!--\n  Audio tag uses the same $video file to be in sync, video is muted\n-->\n\n<!--{\n "video_url": "/static/samples/opossum_snow.mp4"\n}-->\n',
    },
  ],
  groups: [
    'Computer Vision',
    'Natural Language Processing',
    'Audio/Speech Processing',
    'Conversational AI',
    'Ranking & Scoring',
    'Structured Data Parsing',
    'Time Series Analysis',
    'Videos',
  ],
};
